<template>
	<view>
		<my-loading :vshow="loadingshow"></my-loading>
		<!-- <u-navbar back-text="返回" title="聚优先Me" :background="navbackground" title-color="#ffffff" back-icon-color="#ffffff" :back-text-style="{ color: '#ffffff' }"></u-navbar> -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="4000" duration="500">
				<swiper-item v-for="(item, k) in swiperImg" :key="k">
					<view class="swiper-item">
						<image :src="item.image" @click="preview(item.id)"></image>
						<!-- <u-image :src="item.image" width="400px" height="650px" :lazy-load="true" @click="preview(item.id)"></u-image> -->

					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="tabs">
			<view class="tabs-left" @click="changeTuijian" :class="{ 'bold-text': contentType == 0 }">
				推荐
			</view>
			<view class="tabs-content">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view class="scroll-view-item_H" :class="{ 'bold-text': item.id === firstid && contentType == 1 }"
						v-for="item in typelist" :key="item.id" @click="change(item.id)">
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
			<view class="tabs-right">
				<text>{{ stoName }}</text>
			</view>
		</view>
		<view class="content" :style="{ 'background-image': 'url(' + bgimg + ')' }">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" v-if="contentType == 0">
				<view class="content-list">
					<view class="list-item" v-for="(item, k) in viplist" :key="item.id" @click="gobuyvip(item.id)"
						:style="{ 'background-image': 'url(' + http + item.thumb + ')', 'background-size': '100% 100%' }">
						<view class="name">
							<view class="name-left">
								{{ item.name }}
							</view>
							<view class="name-right">
								<!-- <image src="../../static/goto3.png" mode=""></image> -->
							</view>
							<view class="name-check">
								<!-- <checkbox value="cb" checked="true" /> -->
							</view>
						</view>
						<view class="address">
							<view class="address-left">
								<view class="addtext">
									购卡限时:{{ item.activityDuration | dateFormat }}
								</view>
							</view>
							<view class="address-right">
								<view class="vip">
									<u-icon name="rmb" color="#ffffff" size="21"></u-icon>
									{{ item.free }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" v-if="contentType == 1">
				<view class="content-list">
					<view class="list-item" v-for="(item, k) in serverList" :key="k" @click="goserver(item.id)"
						:style="{ 'background-image': 'url(' + http + item.image + ')', 'background-size': '100% 100%' }">
						<view class="name">
							<view class="name-left">
								{{ item.title }}
							</view>
							<view class="name-right" @click="placeOrder(item.id, item.title, item.free, stoid, stoName)">
								<image src="../../static/icons/goto3.png" mode=""></image>
							</view>
							<!-- <view class="name-check">
								<checkbox value="cb" checked="true" />
							</view> -->
						</view>
						<view class="address">
							<view class="address-left">
								<view class="addtext">
									{{ item.content }}
								</view>
							</view>
							<view class="address-right" @click="placeOrder(item.id, item.title, item.free, stoid, stoName)">
								<view class="shang">
									原价<u-icon name="rmb" color="#ffffff" size="21"></u-icon>{{ item.originalCost }}
								</view>
								<view class="xia">
									<u-icon name="rmb" size="21"  color="#ffffff"></u-icon>{{ item.free }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			stoid: 1,
			stoName: '',
			userData: [],
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			loadingshow: false,
			navbackground: {
				backgroundColor: '#272228',
			},
			swiperImg: [],//轮播图列表
			typelist: [],
			typeid: 0,
			firstid: 0,
			bgimg: '',
			serverList: [],
			viplist: [],
			contentType: 0,//0为推荐，1为服务类别
			http: 'https://luxuries.h1668.com/',
		};
	},
	onLoad(options) {
		this.getAdList()

		const item = JSON.parse(decodeURIComponent(options.item));
		this.stoid = item.id
		this.contentType = item.content
		this.typeid = item.typeid
		this.getAdimageList()
		this.getStoreList()
	},
	onShow() {
		this.userData = uni.getStorageSync('userData');
		this.getvipList()
	},
	methods: {
		gobuyvip(id) {
			uni.navigateTo({
				url: '/pagesB/vipGrade/vipDetail?id=' + id
			})
		},

		goserver(id) {
			let item = {
				serverId: id,
				stoid: this.stoid,
			};
			uni.navigateTo({
				url: '/pagesB/server/serverDetail?item=' + encodeURIComponent(JSON.stringify(item))
			})
		},
		preview(id) {
			let item = {
				serverId: id,
				stoid: this.stoid,
			};
			uni.navigateTo({
				url: '/pagesB/server/serverDetail?item=' + encodeURIComponent(JSON.stringify(item))
			})
		},
		//服务类别点击事件
		change(id) {
			this.contentType = 1
			this.typeid = id
			this.firstid = id
			this.getServerList(id)
		},
		//推荐点击事件
		changeTuijian() {
			this.contentType = 0
		},
		//获取服务类别下的所属服务
		getServerList(id) {
			this.loadingshow = true
			uni.request({
				url: uni.getStorageSync('URL') + 'home/Carpark/Carpark/getServerList',
				method: 'POST',
				data: {
					busid: this.userData.id,
					typeid: id,
				},
				header: {
					"X-Requested-With": "XMLHttpRequest"
				},
				dataType: 'json',
				success: (res) => {
					this.serverList = res.data.data
					this.loadingshow = false
				}
			});
		},
		getvipList() {
			uni.request({
				url: uni.getStorageSync('URL') + 'home/user/user/vipList',
				method: 'POST',
				data: {
					busid: this.userData.id
				},
				header: {
					"X-Requested-With": "XMLHttpRequest"
				},
				dataType: 'json',
				success: (res) => {
					this.viplist = res.data.data
				}
			});
		},
		//获取门店服务类别
		getStoreList() {
			this.loadingshow = true
			uni.request({
				url: uni.getStorageSync('URL') + 'home/Carpark/Carpark/getStoidServer',
				method: 'POST',
				data: {
					stoid: this.stoid,
				},
				header: {
					"X-Requested-With": "XMLHttpRequest"
				},
				dataType: 'json',
				success: (res) => {
					this.stoName = res.data.data.store.name
					this.typelist = res.data.data.carwashTypes
					this.firstid = res.data.data.carwashTypes[0].id
					this.getServerList(this.firstid)
					this.loadingshow = false
				}
			});
		},
		//获取广告图背景图
		getAdimageList() {
			uni.request({
				url: uni.getStorageSync('URL') + 'home/Carpark/Carpark/getstorelistimg',
				method: 'POST',
				header: {

					"X-Requested-With": "XMLHttpRequest"
				},
				dataType: 'json',
				success: (res) => {

					
					this.bgimg = res.data.data.thumb
				}
			});
		},
		//获取广告图
		getAdList() {
			uni.request({
				url: uni.getStorageSync('URL') + 'home/Carpark/Carpark/gettopimglist',
				method: 'POST',
				header: {
					"X-Requested-With": "XMLHttpRequest"
				},
				dataType: 'json',
				success: (res) => {
					this.swiperImg = res.data.data
				}
			});
		},
		scroll: function (e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		placeOrder(id, name, free, stoid, stoName) {
			let item = {
				serverId: id,
				serverName: name,
				free: free,
				stoid: stoid,
				stoName: stoName
			};
			uni.navigateTo({
				url: '/pagesC/placeOrder/placeOrder?item=' + encodeURIComponent(JSON.stringify(item))
			})
		},
	},
	filters: {
		dateFormat: function (val) {// 格式化时间
			const dt = new Date(val * 1000)
			const y = dt.getFullYear()
			const m = dt.getMonth() + 1
			const d = dt.getDate()

			return `${y}-${m}-${d}`
		},
	}
}
</script>

<style lang="scss">
page {
	background-color: #6b6b6b;
}

.scroll-Y {
	height: 1000rpx;
}

.uni-margin-wrap {
	width: 100%;
	background-color: #fff;

	.swiper {
		height: 550rpx;

		.swiper-item {
			display: block;
			height: 550rpx;
			line-height: 350rpx;
			text-align: center;
			image{
				width: 340px;
				height: 280px;
			} 
		}
	}
}

.tabs {
	width: 97%;
	height: 75rpx;
	display: flex;
	margin: 15rpx auto;

	.tabs-left {
		width: 12%;
		height: 75rpx;
		line-height: 75rpx;
		text-align: left;
		font-size: 35rpx;
		color: #fff;
	}

	.tabs-content {
		width: 68%;
		height: 75rpx;
		color: #fff;

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			height: 75rpx;

			.scroll-view-item_H {
				display: inline-block;
				width: 30%;
				height: 75rpx;
				line-height: 75rpx;
				text-align: center;
				font-size: 35rpx;
			}
		}
	}

	.tabs-right {
		width: 20%;
		height: 75rpx;
		line-height: 75rpx;
		text-align: right;
		font-size: 35rpx;
		color: #0baafb;
	}
}

.content {
	width: 97%;
	height: 1000rpx;
	margin: 15rpx auto;
	background-repeat: no-repeat;
	background-size: 100% 100%;

	.topselect {
		width: 100%;
		height: 60rpx;
		background-color: #6b6b6b;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fff;
		font-size: 1.1rem;
	}

	.content-list {
		width: 100%;
		height: 100%;

		.empty {}

		.list-item {
			width: 100%;
			height: 220rpx;
			color: #fff;

			.name {
				width: 100%;
				display: flex;

				// background-color: #888481;
				// opacity: 0.8;
				.name-left {
					width: 80%;
					height: 140rpx;
					line-height: 140rpx;
					padding-left: 30rpx;
					color: #fff;
					font-size: 40rpx;
				}

				.name-right {
					width: 20%;
					height: 140rpx;
					display: flex;

					image {
						margin-top: 30rpx;
						width: 100%;
						height: 60%;
						object-fit: contain;
					}
				}

				// .name-check {
				// 	width: 10%;
				// 	height: 140rpx;
				// 	line-height: 140rpx;
				// }
			}

			.address {
				width: 100%;
				display: flex;
				letter-spacing: 1px;

				.address-left {
					width: 70%;
					height: 80rpx;
					background-color: #687177;
					opacity: 0.8;

					.addtext {
						width: 100%;
						height: 80rpx;
						font-size: 0.8rem;
						display: flex;
						align-items: center;
						padding: 15rpx;
					}
				}

				.address-right {
					width: 30%;
					height: 80rpx;
					padding-left: 10px;
					font-size: 14px;
					background-color: #3d484a;
					text-align: center;
					opacity: 0.9;

					.shang {
						height: 40rpx;
						line-height: 40rpx;
						display: flex;
						text-decoration: line-through;
					}

					.xia {
						height: 40rpx;
						display: flex;
						line-height: 40rpx;
					}

					.vip {
						height: 80rpx;
						display: flex;
						line-height: 80rpx;
					}
				}
			}
		}

		.list-item:not(:first-child) {
			margin-top: 10rpx;
		}
	}
}

.bold-text {
	font-weight: bold;
}</style>
